<script setup lang="ts">
import {applicationlist} from "@/api/more";
import {ref} from "vue";
import {useRouter} from "vue-router";
const applylist=ref([])
applicationlist().then(res=>{
    console.log(res.rows)
    applylist.value=res.rows
})
// console.log(applylist)
// 跳转到相应得详情页
const router = useRouter();
function ApplyDetail(item:any) {
    router.push({
        path:'/ApplyDetail',
        query:{
            item:item
        }
    })
}
</script>

<template>
    <div>
        <div class="MyMessege" v-for="(item,index) in applylist" :key="index" @click="ApplyDetail(JSON.stringify(item))">
            <div>
                <img src="../images/mymessege.png" height='25px'>
            </div>
            <div class="MyDetaile">
                <div>
                    <div class="company"><span>{{ item.company}}</span>
                        <div>
                            <button class="examined" v-if="item.auditState=='0'">待审核</button>
                            <button class="pass" v-else-if="item.auditState=='1'" >已通过</button>
                            <button class="NotPass" v-else>未通过</button>
                        </div>
                    </div>
                </div>
                <div class="MyInformation">
                    <p>{{ item.invitee }}</p>
                    <p>{{ item.inviteePhone }}</p>
                    <p>{{ item.updatedTime }}</p>
                </div>
            </div>
        </div>
        <p class="bottom">没有更多数据了~</p>
    </div>
</template>

<style scoped lang="less">
.MyMessege {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    margin: 10px 10px 0 10px;
    border-radius: 10px;

    .MyDetaile {
        width: 90%;
        .company {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
                font-weight: 600;
                width: 70%;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                white-space: nowrap;
            }

                .pass{
                    border: 1px solid gray;
                    background-color: white;
                    color: lightgray;
                    font-size: 14px;
                    margin-right: 10px;
                }
                .examined{
                    border: 1px solid orange;
                    background-color: white;
                    color: orange;
                    font-size: 14px;
                    margin-right: 10px;
                }
                .NotPass{
                    border: 1px solid red;
                    background-color: white;
                    color: red;
                    font-size: 14px;
                    margin-right: 10px;
                }


        }
    }
}

.MyInformation {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
    color: gray;
}

.bottom {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding-bottom: 10px;
}
</style>